<template>
	<div>
		<div class="container">
			<div class="nav">
				<router-link to="/layout/gonglue">
					<img src="../../assets/smallIcon/return.png" alt="">
				</router-link>	
				<Search />
			</div>
			<div class="city">
				<ul>
					<li>
						<router-link to="/layout/fenlei-city">城市</router-link>
					</li>
					<li>
						<router-link to="/layout/fenlei-fenlei">分类</router-link>
					</li>
					<li>
						<router-link to="/layout/fenlei-season">季节</router-link>
					</li>
				</ul>
				<div class="heng"></div>	
			</div>

			<div class="country">
				<div class="country_box">
					<img src="../../assets/landscape/January_JJ.png"   alt="">
				    <img src="../../assets/landscape/February_JJ.png"  alt="">
				    <img src="../../assets/landscape/march_JJ.png"   alt="">
				    <img src="../../assets/landscape/April_JJ.png"   alt="">
				    <img src="../../assets/landscape/may_JJ.png"   alt="">
				    <img src="../../assets/landscape/June_JJ.png"   alt="">
				    <img src="../../assets/landscape/July_JJ.png"   alt="">
				    <img src="../../assets/landscape/August_JJ.png"   alt="">
				    <img src="../../assets/landscape/September_JJ.png"  alt="">
				    <img src="../../assets/landscape/October_JJ.png"    alt="">
				    <img src="../../assets/landscape/November_JJ.png"   alt="">
				    <img src="../../assets/landscape/December_JJ.png"   alt="">
				</div>
			</div>	
		</div>
	</div>
</template>

<script>
import Search from '../../components/search.vue'
export default{
	name:"fSeason",
	data(){
		return{

		}
	},
	components:{
		   Search
		}
}	

</script>
<style scoped lang="less">
.container{
	.nav{
		width:100%;
		height:94 / 50rem;
		background-color: #7DD19C;
		overflow: hidden;
		position:fixed;
	    top:0;
	    left: 0;
	    right: 0;
		img{
			width: 22 /50rem;
			height:40 /50rem;
			float: left;
			margin-left: 20/ 50rem;
			margin-top: 28/50rem;
		}
		.search{
			float: left;
			position: relative;
			overflow: hidden;
			margin-left: 16.2%;
			input{
				width: 456 /50rem;
				height: 66 /50rem;
				border-radius: 30 /50rem;
				border: none;
				background-color: rgba(255,255,255,0.4);
				outline: none;
				float: left;
				margin-top: 14 /50rem;
				text-indent: 80 /50rem;
				color:#fff;
			 }
		}
    }
    .city{
		height: 88 / 50rem;
		background-color: #fff;
        margin-top: 98 / 50rem;
		ul{
           display: flex;
           li{
           	flex:1;
            text-align: center;
            margin-top: 27 / 50rem;
            font-size: 34 / 50rem;
           }
		}
		.heng{
			width: 100 / 50rem;
			height: 4 / 50rem;
			background-color: #5dade2;
			margin-top: 13 / 50rem;
			margin-left: 575 / 50rem;
		}
	}
	.country{
		height: 920 / 50rem;
		// background-color: #fff;
		margin-top: 60 / 50rem;
		.country_box{
				width: 710 / 50rem;
				margin-left: 20 / 50rem;
				img{
			        width: 340 / 50rem;
			        height: 140 / 50rem;
			        padding:  5 / 50rem;
			}
		
		}

	}
}		
</style>